<template>
    <div class="box">
        <header class="header">
            <van-search show-action placeholder="请输入搜索关键词" @click-input="$router.push('/search')" />
        </header>
        <div class="content">
            <Swipe :images="images"></Swipe>
            <van-grid>
                <van-grid-item
                    icon="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"
                    text="京东超市" />
                <van-grid-item
                    icon="https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png"
                    text="京东电器" />
                <van-grid-item :icon="require('@/assets/logo.png')" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
            </van-grid>

            <!-- 第三步：调用组件 -->
            <ProList></ProList> <!-- 写法： <ProList />    <pro-list><pro-list/> -->
        </div>
    </div>
</template>
<!-- <script>
export default {
    setup() {
        const images = [
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        ];
        return { images };
    },
};
</script> -->
<script>
// 第一步：引入自定义的组件
import ProList from './components/ProList.vue'
import Swipe from './components/Swipe.vue'
export default {
    data() {
        return {
            images: [
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
                require('@/assets/logo.png')
            ],
        }
    },
    // 第二步：注册组件
    components: {
        ProList,
        Swipe
    }
};
</script>

<style></style>